<template>
	<view class="all-order-page">
		<phoneSimuHead :titleTxt="titleTxt"></phoneSimuHead>
		<view class="tit-box">
			<view class="arrow-txt"><text class="icon-font" >&#xe604;</text></view>
			<view class="tit-txt">订单确认</view>
			<view class="c-txt">联系商家</view>
		</view>
		
		<view class="get-p-box">
			<view class="s-y-box">
				<view class="g-p-s l-b" :class="{'cur-g-p-s' : curGetGdType == 1}" @click="curGetGdType = 1">上门自取</view>
				<view class="g-p-s r-b" :class="{'cur-g-p-s' : curGetGdType == 2}" @click="curGetGdType = 2">邮寄到家</view>
			</view>
		</view>
		
		<view class="dress-box">
			<view class="d-t" v-if="curGetGdType == 1">
				<view class="dt-txt">取货地址：<text class="d-txt">{{dreess}}</text></view>
				<text class="icon-font pos-txt">&#xe60d;</text>
			</view>
			<view class="c-txt">联系信息</view>
			<view class="tip-txt">为方便核对订单信息，请填写您的信息</view>
		</view>
		
		<view class="o-list-box phone-list">
			<view class="i-list" v-for="(item,index) in oderList" :key="index">
				<view class="gd-box">
					<image class="gd-img" :src="item.gdImg"></image>
					<view class="g-i-box">
						<view class="g-tit">{{item.gdName}}</view>
						<view class="g-p-c">
							<view class="p-t">￥{{item.price}}</view>
							<view class="p-c-t">￥{{item.price0}}</view>
						</view>
					</view>
					<view class="o-n-t">x{{item.num}}</view>
				</view>
				
				<view class="msg-box">
					<view class="msg-lb">配送方式：</view>
					<view class="p-t-txt">{{getGdType[curGetGdType-1].title}}</view>
				</view>
				
				<view class="msg-box">
					<view class="msg-lb">买家留言：</view>
					<input class="msg-txt" placeholder="填写内容请和商家确认(选填)" placeholder-style="color:#999;font-size:24upx" disabled="false"/>
				</view>
			</view>
			<view class="prolicy-box">
				<view class="tip-t" v-if="curGetGdType == 1">该产品仅支付上门自取</view>
				<view class="p-b">
					<text class="icon-font check-icon"
						:checked="pChecked"
						:class="pChecked ? 'icon-fxxuanzhongfill':'icon-fxweixuanzhong'">
					</text>
					<text class="t-d-txt">购买秒杀产品需同意</text>
					<text class="p-link-txt">《用户购买须知》</text>
				</view>
			</view>
		</view>
	
		<view class="comfit-box">
			<view class="m-box">合计金额：<text class="m-txt">￥{{money}}</text></view>
			<view class="comfit-txt-btn">提交订单</view>
		</view>
		
	</view>
</template>

<script>
	import phoneSimuHead from "@/components/interactive/appComponrnts/phone-simulation-head.vue";
	export default{
		components:{phoneSimuHead},
		data(){
			return{
				titleTxt:"",
				title:"所有订单",
				
				pChecked:true,
				
				getGdType:[{id:1,title:'上门自取'},
						   {id:2,title:'邮寄到家'}],
				curGetGdType:1,
				dreess:"中国广东省广州市天河区xxx路xxx号xx室",
				money:636.65,
				oderList:[
					{
						no:3215648131,
						payStatus : 1,
						payStatusTxt:"已付款  ",
						statusTxt:"未发货",
						status:0,
						gdName:"阿尔法蛋 词典笔X10 (示例)",
						gdImg:"https://cdn.imiyun.com/d/cp100/goods/e39f13831516d82d521661acd2a096e6.jpeg?x-oss-process=image/resize,m_lfit,w_480",
						price:636.65,
						price0:698.00,
						num:1,
						c_name:"李四",
						
						c_cellphone:"13812345678",
						o_desc:"订单已付款，如收货 信息有误，请联系商家更改",
						msg:"无",
						playType : 0,  //0：线下，1线上
					},
				],
			}
		},
		created() {
			
		},
		
		mounted() {
			uni.$on('init_active_title',(data)=>{
				this.titleTxt = data;
			});
		},
		
		methods: {
		},
	}
</script>

<style lang="scss">
	.all-order-page
	{
		width: 100%;
		height: 100%;
		position: relative;
		
		.tit-box
		{
			border-top:1upx solid #eee;
			background-color: #FFF;
			display: flex;
			padding: 20upx 20upx;
			text-align: center;
			align-items: center;
			justify-content: center;
			position: relative;
			color: #333;
			.arrow-txt
			{
				position: absolute;
				left: 20upx;
				font-size: 30upx;
			}
			
			.tit-txt
			{
				font-size: 30upx;
			}
			.c-txt
			{
				color:#f44848;
				position: absolute;
				right: 20upx;
			}
			
		}
		
		.get-p-box
		{
			height: 140upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.s-y-box
			{
				display: flex;
				width: 360upx;
				position: relative;
				align-items: center;
				.g-p-s
				{
					width: 200upx;
					text-align: center;
					height: 50upx;
					line-height: 50upx;
					color: #FFF;
					background-color: #DDD;
					border-radius: 25upx;
					cursor: pointer;
				}
				.l-b
				{
					left: 0;
					position: absolute;
				}
				.r-b
				{
					right: 0;
					position: absolute;
				}
				
				.cur-g-p-s
				{
					background-color: #f44848;
					z-index: 2;
				}
			}
		}
		

		.dress-box
		{
			padding: 40upx 20upx;
			background-color: #FFF;
			color: #333;
			.d-t
			{
				position: relative;
				.dt-txt
				{
					color: #666;
					.d-txt
					{
						color: #999;
					}
				}
				.pos-txt
				{
					color: #3388ff;
					position: absolute;
					right: 0;
					top: 0;
					cursor: pointer;
				}
			}
			.c-txt
			{
				text-align: center;
				padding: 20upx 10upx;
				margin: 10upx 210upx;
				border-radius: 80upx;
				font-size: 30upx;
				background-color: #DDD;
			}
			.tip-txt
			{
				text-align: center;
				color: #FF6600;
			}
		}
		
		.o-list-box
		{
			width: 100%;
			height:calc(100% - 300upx) ;
			// margin: 20upx 0;
			.i-list
			{
				background-color: #FFF;
				padding: 20upx;
				margin-top:20upx;
				color: #333;
				
				.gd-box
				{
					padding:20upx;
					background-color: #EEE;
					display: flex;
					position: relative;
					.gd-img
					{
						width: 160upx;
						min-width: 160upx;
						height: 160upx;
						border-radius: 8upx;
					}
					.g-i-box
					{
						.g-tit
						{
							padding-left: 20upx;
							font-size: 30upx;
						}
						.g-p-c
						{
							display: flex;
							padding-left: 20upx;
							
							.p-t
							{
								font-size: 30upx;
								color: #f44848;
							}
							.p-c-t
							{
								color: #999;
								text-decoration: line-through;
								padding-top: 10upx;
								padding-left: 10upx;
							}
						}
					}
					.o-n-t
					{
						right: 20upx;
						position: absolute;
						bottom: 20upx;
					}
				}
				
				.msg-box
				{
					display: flex;
					padding: 10upx 0;
					border-bottom: 1upx solid #EEE;
					.msg-lb
					{
						min-width: 120upx;
					}
					.msg-txt
					{
						color: #999;
					}
				}
				
				.add-sub-box
				{
					justify-content: space-between;
					align-items: center;
					.gd-buy-add
					{
						display: flex;
						justify-content: flex-end;
						align-items: center;
						.g-a-s-btn
						{
							height: 50upx;
							width: 50upx;
							border-radius: 35upx;
							background-color: #3388ff;
							color: #FFF;
							text-align: center;
							cursor: pointer;
						}
						.ad-b
						{
							
						}
						.su-b
						{
							background-color: #DDD;
							.s-txt
							{
								padding-left: 10upx;
							}
						}
						
						.iput-txt
						{
							width: 100upx;
							text-align: center;
						}
					}
				}
				
				
			}
			.prolicy-box
			{
				padding: 20upx;
				color: #333;
				.tip-t
				{
					
				}
				.p-b
				{
					.t-d-txt
					{
						padding-left: 10upx;
					}
					.check-icon
					{
						color: #3388ff;
					}
					.p-link-txt
					{
						color: #3388ff;
					}
				}
			}
		}
		
		.comfit-box
		{
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;
			background-color: #FFF;
			height: 80upx;
			align-items: center;
			
			.m-box
			{
				width: 60%;
				text-align: center;
				.m-txt
				{
					color: #f44848;
				}
			}
			.comfit-txt-btn
			{
				text-align: center;
				width: 40%;
				font-size: 30upx;
				background-color: #f44848;
				color: #FFF;
				height: 100%;
				line-height: 80upx;
			}
		}
	}
</style>